<template>
	<div class="user-level">
		<div class="com-header border-1px">
			<div class="back"
				onclick="javascript:history.go(-1)"
			>
				<i class="iconfont">&#xe697;</i>
			</div>
			<div class="content">
				晋升代理等级
			</div>
		</div>
		<div class="tip">
			<img :src="agent_upgrade_banner" />
		</div>
		<div class="lv-content">
			<div class="lv-item"
				v-for="(item, index) in list"
			>
				<div class="lv-i-header border-1px"
					@click="showPay(item)"
					v-if="item.cur_bool==0"
				>
					<img v-lazy="item.icon_image" />
					<p class="title">{{item.name}}</p>
					<p class="improve">立即升级</p>
				</div>
				<div class="lv-i-header border-1px"
					@click="showPay(item)"
					v-if="item.cur_bool==1"
				>
					<img v-lazy="item.icon_image" />
					<p class="title">{{item.name}}</p>
					<p class="improve">您已达到当前级别</p>
				</div>
				<div class="more"
					@click="showDetail(item)"
				>
					点击查看权益
				</div>
				<div class="detail bordertop-1px"
					v-if="name == item.name && isDetail"
				>
                    <p v-if="item.require_money_bool==1">收费金额：<span>{{item.require_money}}</span> 元</p>
                    <p v-if="item.require_order_bool==1">自购订单数量满足：<span>{{item.require_order}}</span> 单</p>
                    <p v-if="item.require_son_bool==1">邀请一级粉丝：<span>{{item.require_son}}</span> 个</p>
                    <p v-if="item.require_commission_bool==1">累计结算预估佣金：<span>{{item.require_commission}}</span> 元</p>
                    <div class="d-tip" v-if="item.condition_mode==1 &&  item.require_money_bool==1">
                        *注:&nbsp;&nbsp;&nbsp;上述条件需要全部满足才可升级
                    </div>
                    <div class="d-tip" v-if="item.condition_mode==1 &&  item.require_money_bool==0">
                        *注:&nbsp;&nbsp;&nbsp;上述条件全部满足即可自动升级
                    </div>
                    <div class="d-tip" v-if="item.condition_mode==0 &&  item.require_money_bool==1">
                        *注:&nbsp;&nbsp;&nbsp;上述条件任意满足即可升级
                    </div>
                    <div class="d-tip" v-if="item.condition_mode==0 && item.require_money_bool==0">
                        *注:&nbsp;&nbsp;&nbsp;上述条件任意满足即可自动升级
                    </div>
                    <div class="">
                      <p>---------------------</p>
                      <p>{{item.description}}</p>
                    </div>
                </div>
			</div>
		</div>
		<div class="ac-dialog"
			v-show="isPay"
			@click="isPay = false"
		>
			<div class="ac-d-content"
				@click.stop="isPay=true"
			>
				<div class="ac-d-item"
					@click="pay(1)"
					v-if="wx_login == 1 && wxpay_bool == 1"
				>
					<img src="../assets/img/share/wx.png" />
					<p>微信</p>
				</div>
				<div class="ac-d-item"
					@click="pay(2)"
					v-if="alipay_bool == 1"
				>
					<img src="../assets/img/alipay.png" />
					<p>支付宝</p>
				</div>
			</div>			
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import Http from '../http.js'
	export default{
		data(){
			return{
				isDetail: true,
				list: [],
				name: '',
				type: 'wxpay',
				isPay: false,
				id: 1,
				agent_upgrade_banner: window.localStorage.getItem("agent_upgrade_banner"),
				wxpay_bool: window.localStorage.getItem("wxpay_bool"),
				alipay_bool: window.localStorage.getItem("alipay_bool"),
				wx_login: window.localStorage.getItem("wx_login"),
			}
		},
		mounted(){
			axios.post(Http.LEVELJOIN)
			.then( res => {
				var ret = res.data;
				this.list = ret.data.level_list;
			})
		},
		methods: {
			showPay: function(item){
				if (item.require_money_bool==1 && item.cur_bool==0) {
					this.isPay = true;
					this.id = item.id;
				}else if (item.cur_bool==0 && item.require_money_bool!=1){
					Toast("未达到升级条件")
				}
			},
			pay: function(id){
				if( id == 1){
					this.type = 'wxpay'
				}else if( id == 2 ){
					this.type = 'alipay'
				}
				this.isPay = false;
				var params = new URLSearchParams();
				params.append('type', this.type);
				params.append('level_id', this.id);
				axios.post(Http.LEVELJOINPAY,params)
				.then( res => {
					var ret = res.data;
					Toast(ret.msg);
				})
			},
			showDetail: function(item){
				this.name = item.name;
				// this.isDetail = !this.isDetail;
			}
		}
	}
</script>
<style lang="scss" scoped>
	.user-level{
		.tip{
			width: 100%;
			background: #333;
			font-size: 0.26rem;
			font-weight: bold;
			color: #9a7725;
			padding: 0.4rem 0;
			img{
				width: 60%;
			}
		}
		.lv-content{
			padding: 0.2rem 0.24rem;
			background: #f5f5f5;
			min-height: 9rem;
			.lv-item{
				margin-bottom: 0.2rem;
				background: #fff;
				padding: 0.2rem;
				padding-bottom: 0;
				border-radius: 0.2rem;
				.lv-i-header{
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-bottom: 0.2rem;
					img{
						width: 0.8rem;
						height: 0.8rem;
					}
					.title{
						margin-left: -2rem;
					}
					.improve{
						padding: 0 0.2rem;
						height: 0.54rem;
						line-height: 0.54rem;
						background: #debc6c;
						border-radius: 0.1rem;
						color: #333;
						font-size: 0.24rem;
					}
				}
				.more{
					width: 100%;
					height: 0.6rem;
					line-height: 0.6rem;
					text-align: right;
				}
				.detail{
					padding-top: 0.3rem;
					padding-bottom: 0.3rem;
					text-align: left;
					p{
						span{
							color: #ffb534;
						}
					}
					.d-tip{
						margin: 0.1rem 0;
						font-size: 0.24rem;
						font-weight: bold;
					}
				}
			}
		}
		.ac-dialog{
			position: fixed;
			top: 0;
			z-index: 99;
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.6);
			.ac-d-content{
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				padding: 0.4rem 0;
				background: #fff;
				.ac-d-item{
					flex: 0 0 50%;
					img{
						width: 0.88rem;
						margin-bottom: 0.2rem;
					}
					p{
						font-size: 0.26rem;
					}
				}
			}
		}
	}
</style>